<!--suppress HtmlUnknownAttribute -->
<template>
    <div class="main-content level-container">
        <section class="search-bar">
            <search-bar></search-bar>
        </section>

        <section class="level-body">
            <a-table
                :columns="columns"
                :data-source="logLevel.logs"
                :show-header="false">
                <template v-slot:action="record">
                    <div
                        class="btn"
                        @click="changeLogLevel('error', record.name)"
                        :class="record.level === 'ERROR' ? 'active' : ''">
                        Error
                    </div>
                    <div
                        class="btn"
                        @click="changeLogLevel('warn', record.name)"
                        :class="record.level === 'WARN' ? 'active' : ''">
                        Warn
                    </div>
                    <div
                        class="btn" @click="changeLogLevel('info', record.name)"
                        :class="record.level === 'INFO' ? 'active' : ''">
                        Info
                    </div>
                    <div
                        class="btn" @click="changeLogLevel('debug', record.name)"
                        :class="record.level === 'DEBUG' ? 'active' : ''">
                        Debug
                    </div>
                    <div
                        class="btn" @click="changeLogLevel('trace', record.name)"
                        :class="record.level === 'TRACE' ? 'active' : ''">
                        Trace
                    </div>
                </template>
            </a-table>
        </section>
    </div>
</template>

<script>
    import SearchBar from '../../../components/search-bar/SearchBar.vue';

    // 1. 定义表头.
    const columns = [
        {
            title: '日志分组',
            dataIndex: 'name',
            key: 'name',
            width: '55%',
        },
        {
            title: '级别',
            key: 'level',
            width: '45%',
            scopedSlots: { customRender: 'action' },
        },
    ];

    export default {
        name: 'Level',
        components: {
            SearchBar,
        },
        computed: {
            logLevel() {
                return this.$store.state.level;
            },
        },
        data() {
            return {
                columns,
            };
        },
        methods: {
            changeLogLevel(level, name) {
                this.$store.dispatch('level/changeLogLevel', {
                    instance: this.$route.params.id,
                    level,
                    name,
                });
                this.$store.dispatch('level/loadLogLevel', this.$route.params.id);
            },
        },
        mounted() {
            this.$store.dispatch('level/loadLogLevel', this.$route.params.id);
        },
    };
</script>

<style lang="scss" scoped>
    .level-container {
        padding: 24px;

        .level-body {
            margin-top: 24px;

            .btn {
                float: left;
                margin-left: 7px;
                padding: 6px 24px;
                color: #282C3B;
                font-size: 14px;
                font-weight: 400;
                border-radius: 4px;
                cursor: pointer;

                &.active, &:hover {
                    font-weight: 500;
                    color: #FFF;
                    background: #2A6CF0;
                }
            }
        }
    }
</style>
